<template>
    <div class="Article_main_box_css">
      <div class="Article_content_box_css" v-for="i in arr" :key="i.di">
        <div class="Article_mai_box_css" @click="ArticleOnclick(i.id,i.articleTitle)">
          <div class="Article_left_box_css">
            <img :src="i.articleCover" style="width: 100%;height: 100%;"/>
          </div>
          <div class="Article_right_box_css">
            <div class="Article_right_box_top_css">
                <b style="font-size: 1vw;" >{{ i.articleTitle}}</b>
            </div>
            <div class="Article_right_box_middle_css">
                <a style="font-size: 1vw;">{{ i.articleInformation}}</a>
            </div>
            <div class="Article_right_box_bottom_css">
                <a style="float: right;font-size: 1vw;padding-top: 1vh;">作者：{{ i.articleAuthor }}</a>
            </div>
          </div>
        </div>
      </div>
      <br>
    <div></div>
    </div>
  </template>

  <script>
  import axios from 'axios'
      export default {
          name:'Article',
          data(){
            return{
              arr:[]
            }
          },
          mounted() {
            var that=this
            axios.get('api/Article')
            .then(function(res){
              for(var i=0;i<res.data.length;i++){
                that.arr.push(res.data[i])
                // console.log(res.data[i].articleUrl)
              }
            })
            .catch(function(error){
              console.log(erro)
            })
          },
          methods:{
            ArticleOnclick(id,articleTitle){
              var that=this
              that.$store.state.ArticleId=id
              that.$store.state.ArticleTitle=articleTitle
              that.$router.replace("/secondsheets/ArticleContent")
            }
          }
      }
  </script>
  
  <style>
      .Article_mai_box_css{
          width: 70vw;
          height: 15vh;
          margin-left: 17vw;
          margin-top: 3vh;
      }
      .Article_left_box_css{
        width: 15%;
        height: 100%;
        float: left;
      }
      .Article_right_box_css{
        width: 80%;
        height: 100%;
        float: left;
      }
      .Article_right_box_top_css{
        width: 100%;
        height: 25%;
        margin-left: 1vw;
      }
      .Article_right_box_middle_css{
        width: 100%;
        height: 50%;
        margin-left: 1vw;
      }
      .Article_right_box_bottom_css{
        width: 100%;
        height: 25%;
      }
  </style>